<template>
  <div class="paste-unit-wrapper" :class="getIndentClass(modelValue.alignment)">
    <div class="field-label" :class="{ 'bold-text': modelValue.isBold }">
      <span v-if="modelValue.prefixSymbol && modelValue.prefixSymbol !== 'none'" class="prefix-symbol">
        {{ getPrefixSymbol() }}
      </span>
      <span>{{ modelValue.fieldName }}</span>
    </div>
    <div class="paste-unit" :style="containerStyle">
      <div class="paste-container" :class="styleClass">
        <el-input
          v-model="editableInnerText"
          @input="updateInnerText"
          :placeholder="placeholderText"
          class="field-input"
          :style="inputStyle"
          type="textarea"
          :rows="2"
          resize="none"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch } from 'vue';

const props = defineProps({
  modelValue: {
    type: Object,
    required: true,
    default: () => ({
      fieldName: '样本编号:',
      innerText: '样本编号标签\\n粘贴处',
      styleType: 'style1',
      width: 5,
      height: 4,
      alignment: 'indent-0',
      prefixSymbol: '',
      isBold: false,
    }),
  },
});

const emit = defineEmits(['update:modelValue']);

const editableInnerText = ref(props.modelValue.innerText.replace(/\\n/g, '\n'));

watch(() => props.modelValue.innerText, (newVal) => {
  editableInnerText.value = newVal.replace(/\\n/g, '\n');
});

const containerStyle = computed(() => ({
  width: `${props.modelValue.width * 40}px`,
  height: `${props.modelValue.height * 40}px`,
}));

const styleClass = computed(() => (props.modelValue.styleType === 'style2' ? 'style2' : 'style1'));

const inputStyle = computed(() => ({
  fontSize: props.modelValue.styleType === 'style2' ? '15px' : '13px',
  fontWeight: '500',
}));

const placeholderText = computed(() =>
  props.modelValue.styleType === 'style2' ? '报告单粘贴页' : '样本编号标签\n粘贴处'
);

const getIndentClass = (alignment) => {
  const indentMap = {
    'indent-0': 'indent-0',
    'indent-1': 'indent-1',
    'indent-2': 'indent-2',
    'indent-3': 'indent-3',
    'indent-4': 'indent-4',
    'indent-5': 'indent-5',
  };
  return indentMap[alignment] || 'indent-0';
};

const getPrefixSymbol = () => {
  const symbolMap = {
    dot_circle: '⏺',
    star: '✧',
    pointer: '☞',
    arrow_curved: '⮚',
    square: '⯀',
  };
  return symbolMap[props.modelValue.prefixSymbol] || '';
};

const updateInnerText = (newText) => {
  emit('update:modelValue', {
    ...props.modelValue,
    innerText: newText.replace(/\n/g, '\\n'),
  });
};

watch(() => props.modelValue.styleType, (newVal, oldVal) => {
  if (newVal === 'style2') {
    emit('update:modelValue', {
      ...props.modelValue,
      fieldName: '',
      prefixSymbol: '',
      width: 12,
      height: 4,
    });
  } else if (oldVal === 'style2' && newVal === 'style1') {
    emit('update:modelValue', {
      ...props.modelValue,
      fieldName: '样本编号:',
      width: 5,
      height: 4,
    });
  }
});
</script>

<style scoped lang="scss">
@import '@/assets/common-styles.scss';

.paste-unit-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.field-label {
  white-space: nowrap;
}

.bold-text {
  font-weight: bold;
}

.paste-unit {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  box-sizing: border-box;
}

.paste-container {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;

  &.style1 {
    // 样式1：样本单（无背景色）
    border: 1px solid #333;
    background-color: white;
    position: relative;
  }

  &.style2 {
    // 样式2：报告单（浅灰色背景）
    border: 1px solid #666;
    border-radius: 0;
    background-color: #f0f0f0;
  }
}

.field-input {
  width: 90%;
  
  :deep(.el-input__inner),
  :deep(.el-textarea__inner) {
    border: none;
    text-align: center;
    color: #333;
    background-color: transparent;
    padding: 6px 10px;
    resize: none;
  }
  
  :deep(.el-input__wrapper),
  :deep(.el-textarea__wrapper) {
    background-color: transparent;
    box-shadow: none;
    
    &:hover {
      box-shadow: 0 0 0 1px #409eff inset;
      border-radius: 4px;
    }
    
    &.is-focus {
      box-shadow: 0 0 0 1px #409eff inset;
      border-radius: 4px;
    }
  }
}
</style>